<template>
	<div class="wo-edit">
		<!-- <div class="header">
		  <van-nav-bar title="我的资料" fixed  right-text left-arrow @click-left="onClickLeft"/>
		</div> -->
		<div class="header">
		  <van-nav-bar fixed title="我的资料" right-text left-arrow @click-left="onClickLeft"/>
		</div>
		<van-panel title="用户基本信息" desc="用户账号不可修改" status="普通用户">
		    <div class="avatar">
		        <div class="left">
		            <img :src="userInfo.avatar ? userInfo.avatar:'http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/bjpng.png'" class="user_two_img"/>
		        </div>
		        <div class="right">
		            <van-uploader :after-read="onRead">
		                <van-icon name="photograph" />
		            </van-uploader>
		        </div>
		    </div>
		    <van-field
		            :value="userInfo.nickname"
		            label="用户名"
		            left-icon="contact"
		
		    />
		        <van-field
		                :value="userInfo.username"
		                label="账号"
		                left-icon="manager-o"
		                disabled
		        />
		
		    <van-cell :title="areaReturnData[0]?areaReturnData[0].name+' '+areaReturnData[1].name+' '+areaReturnData[2].name:'请选择所在村庄'" @click="openAdd()" is-link arrow-direction="down" value="" />
		
		    <van-popup v-model="show" position="bottom" :overlay="false">
		
		        <van-area :area-list="areaList" :columns-num="3" @cancel="onCancel" @confirm="onConfirm" />
		
		    </van-popup>
		
		    <div slot="footer">
		
		        <van-button size="large" type="danger">保存</van-button>
		    </div>
		</van-panel>
	</div>
</template>

<script>
    import areaList from "../../../static/area";
    export default {
        name: "edit",
        data(){
            return{
                userInfo:[],
                //市
                areaList: areaList,
                areaReturnData:{},
                positionText: "",
                show:false,
                address:''
            }
        },
        methods: {
            onRead(file) {
                let params={
                  avatar:file.content
                };
                let result=this.$axios.post(this.$api.modifyUserAttr,params);
                console.log(result)
            },
            onCancel(){
                this.show=false;
            },//绑定确认
            onConfirm(e){
                this.areaReturnData=e;
                this.show=false;
            },
            openAdd(){
                this.show=true;
            },
			onClickLeft() {
			  this.$router.go(-1);
			},
        },
        mounted(){
            this.userInfo=JSON.parse(localStorage.getItem("userInfo"));
            console.log(this.userInfo);
        }
    };
</script>

<style scoped>
    .avatar{
        padding: 15px;
    }
    .avatar img{
        height:100px;
    }
    .left{
        position:relative;
        width:50%;
        line-height: 100px;
        vertical-align:middle;
        display: inline-block;
    }
    .right{
        text-align: right;
        width:40%;
        float:right;
        line-height: 120px;
    }
    .van-icon{
        font-size:34px;
    }
	.wo-edit .header .van-nav-bar{background: #fff; }
	.wo-edit .van-nav-bar .van-icon {color: #666;font-size: 20px;}
	.wo-edit .van-nav-bar__title {color: #323233;font-size: 16px;}
	.wo-edit .van-panel{margin-top:50px}
</style>